<template>
	<view class="wx-login">
		<watermark></watermark>
		<view class="xw-login-form">
			<form>
				<view class="xw-login-form-item">
					<view class="xw-login-form-label">手机号</view>
					{{phone}}
				</view>
				<view class="xw-login-form-item">
					<view class="xw-login-form-label">验证码</view>
					<input class="xw-login-form-input" placeholder="请填写验证码" v-model="form.code" name="code" type="text" />
					<view class="wx-btn wx-btn-info" @click="getMsgCode()" v-if="!loading">获取验证码</view>
					<view class="wx-btn wx-btn-info" v-else>{{time}}秒后重试</view>
				</view>
				<view class="xw-login-form-item">
					<view class="xw-login-form-label">新密码</view>
					<input class="xw-login-form-input" placeholder="请输入密码" name="password" v-model="form.password" :password="showPassword"
						type="text" value="" />
					<view class="login-form-icon login-form-seepass" @click="changePassword">
						<image src="../../static/img/l03.png" mode="aspectFill" v-if="showPassword"></image>
						<image src="../../static/img/l04.png" mode="aspectFill" v-else></image>
					</view>
				</view>
				<view class="xw-login-form-item">
					<view class="xw-login-form-label">确认密码</view>
					<input class="xw-login-form-input" placeholder="请输入确认密码" name="repassword" v-model="form.repassword" :password="showrePassword"
						type="text" value="" />
					<view class="login-form-icon login-form-seepass" @click="changerePassword">
						<image src="../../static/img/l03.png" mode="aspectFill" v-if="showrePassword"></image>
						<image src="../../static/img/l04.png" mode="aspectFill" v-else></image>
					</view>
				</view>
			</form>
		</view>
		<slideCode v-if="slideCode[0].show" :session_id="session_id[0]" send_type="login" @close="slideCode[0].show = false" @success="slideCode_success(0, $event)"></slideCode>
	</view>
</template>

<script>
	import slideCode from '@/components/slideCode/slideCode.vue'
	export default {
		data() {
			return {
				code:'',
				loading: false,
				timer: null,
				time: 60,
				logintype: 0,
				phone: '',
				cid: '',
                form:{
                    password:'',
                    repassword:'',
                    code:'',
                },
				showPassword: true,
				showrePassword: true,
				agree: false,
				session_id: [],
				slideCode: [
					{show: false}
				],
			}
		},
		onLoad() {
		  var u = this.$store.state.userInfo;
          this.phone = u.phone;
		},
		methods: {
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			changerePassword() {
				this.showrePassword = !this.showrePassword;
			},
			getMsgCode() {
				var reg = /^1[0-9]{10,10}$/;
				if(!reg.test(this.phone)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				this.session_id[0] = this.phone * 1;
				this.slideCode[0].show = true;
			},
			//发送验证码回调
			slideCode_success: function(id,ret){
				var _this = this;
				if (ret.code == 200) {
					this.loading = true
    				this.timer = setInterval(() => {
    					this.time--
    					if (this.time <= 0) {
    						clearInterval(this.timer)
    						this.loading = false
    						this.time = 60
    					}
    				}, 1000);
				}
			},
			subform() {
				var rules = {
					password: {
						rules: [{
							checkType: "required",
							errorMsg: "请输入密码"
						}, {
							checkType: "string",
							checkRule: "6,20",
							errorMsg: "至少输入6-20位"
						}]
					},
					repassword: {
						rules: [{
							checkType: "required",
							errorMsg: "请输入确认密码"
						}, {
							checkType: "string",
							checkRule: "6,20",
							errorMsg: "至少输入6-20位"
						}]
					},
					code: {
						rules: [{
							checkType: "required",
							errorMsg: "请输入验证码"
						}]
					}
				};
                var formData = JSON.parse(JSON.stringify(this.form));
				var checkRes = this.$zmmFormCheck.check(formData, rules);
				formData.password=this.$md5.hex_md5(formData.password);
				formData.repassword=this.$md5.hex_md5(formData.repassword);
                if(formData.password!=formData.repassword){
                    uni.showToast({
						title:'两次密码输入不一致',
						icon:'none'
					});return;
                }
				if (checkRes) {
        			uni.showLoading({
        				title: '提交中'
        			});
					this.$http.request({
						url: '/auth/resetpassword',
						method: 'POST',
						data:JSON.stringify(formData),
						success: (res) => {
							if (res.data.code == 200) {
							     this.$fc.ToastBack('密码修改成功');
							}
						}
					});
				} else {
					uni.showToast({
						title: this.$zmmFormCheck.error,
						icon: "none",
						position: 'bottom'
					});
				}
			},
        	onNavigationBarButtonTap(e) {
        		switch (e.index) {
        			case 0:
        				this.subform()
        				break;
        			default:
        				break;
        		}
        	},
		}
	}
</script>

<style lang="scss" scoped>
	.wx-login-title {
		text-align: center;
		padding-top: 120rpx;
		font-size: 42rpx;
		padding-bottom: 24rpx;
	}

	.xw-login-form {
		padding: 34rpx;
	}

	.xw-login-form-item {
		position: relative;
		padding: 0 12rpx;
		border-bottom: 1px #eee solid;
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 100rpx;
		height: 100rpx;
	}

	.xw-login-form-label {
		width: 160rpx;
		min-width: 160rpx;
	}

	.xw-login-form-input {}

	.login-agree {
		margin-top: 34rpx;
		justify-content: center;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.login-agree-text,
	.login-agree-btn {
		font-size: 24rpx;
		color: #222;
	}

	.login-agree-text {
		color: #8295a5;
	}

	.login-form-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.login-form-seepass {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.login-form-icon image {
		float: left;
		width: 50rpx;
		height: 50rpx;
	}

	.xw-login-form-code {
		padding: 0 12rpx;
		height: 100rpx;
		line-height: 100rpx;
		color: #8295a5;
	}

	.wx-btn {
		min-width: 200rpx;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		border-radius: 12rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 32rpx;
	}

	.wx-btn-info {
		background-color: #05C160;
	}

	.xw-login-form-btn {
		width: 300rpx;
		margin-top: 120rpx;
	}
</style>
